<template>
  <div id="user" class="homepage">
    <div class="header" id="header" style="transform: perspective(500px) matrix3d(1, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00197768, 0, 1);"></div>
    <div class="user-logo-wrapper" id="user-logo-wrapper" style="transform: perspective(500px) matrix3d(1.00003, 0, 0, 0, 0, 1.00003, 0, 0, 0, 0, 1, 0, 0, 0.00398412, 0, 1);">
      <div class="user-logo">
        <img id="userLogo" src="../../assets/img/ps4.jpg">
      </div>
    </div>
    <section id="wrapper">
      <div id="scroller" style="padding-top: 202px; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transition-duration: 600ms; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);">
        <div class="userInfo">
          <h1 id="userName" class="userName">Hi_roko</h1>
        </div>
        <ul class="infoList" id="infoList">
          <li class="uls">
            年轻有为
          </li>
          <li class="uls">
            2B青年
          </li>
          <li class="uls">
            独一无二
          </li>
          <li class="uls">
            人很好，nice
          </li>
          <li class="uls">
            大帅哥
          </li>
          <li class="uls">
            呦呵呵呵！
          </li>
          <li class="uls">
            屌丝一个
          </li>
          <li class="uls">
            无与伦比
          </li>
          <li class="uls">
            帅帅哒
          </li>
        </ul>
      </div>
    </section>
  </div>
</template>

<script>

  import '../../assets/common/js/alloy_touch.css'
  import '../../assets/common/js/alloy_touch_transform'

  export default {
    name: 'user',
    data() {
      return {}
    },
    mounted() {
      this.$store.commit('isHShow_Controller');

      var _this = this,
          user = document.getElementById("user"),
          wrapper = document.getElementById("wrapper"),
          scroller = document.getElementById("scroller"),
          header = document.getElementById("header"),
          userLogo = document.getElementById("user-logo-wrapper"),
          alloyTouch = null;

      wrapper.style.height = window.innerHeight+'px';
      scroller.style.minHeight = window.innerHeight+'px';
      Transform(scroller, true);
      Transform(header);
      header.originY = -70;
      header.translateY = -70;
      Transform(userLogo);

      alloyTouch = new AlloyTouch({
        touch: "#wrapper",
        vertical: true,
        target: scroller,
        property: "translateY",
        maxSpeed: 2,
        outFactor: 0.2,
        min: 160 * -20 + window.innerHeight - 202 - 50,
        max: 0,
        touchStart: function () {
          _this.reastMin(alloyTouch);
        },
        lockDirection: false,
        change: function (v) {
          if (v < 0) {
            if (v < -140) v = -140;
            var scaleY = (240 + v) / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
          } else {
            var scaleY = 1 + v / 240;
            header.scaleY = scaleY;
            userLogo.scaleX = userLogo.scaleY = scaleY;
            userLogo.translateY = v / 1.7;
          }
        }
      })

      user.addEventListener("touchmove", function (evt) {
        evt.preventDefault();
      }, false);
    },
    methods: {
       reastMin(evt) {
         evt.min = -1 * parseInt(getComputedStyle(scroller).height) + window.innerHeight - 50;
      }
    },
    beforeDestroy(){
      this.$store.commit('isHShow_Controller');
    }
  }
</script>

<style lang="scss" scoped>

  #scroller, #wrapper, .header, .user-logo-wrapper {
    position: absolute;
    width: 100%;
  }

  #userLogo, .user-logo {
    -webkit-background-size: cover;
  }

  #wrapper{
    overflow: hidden;
  }

  #wrapper {
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
  }

  #scroller {
    padding-top: 202px;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    will-change: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .header {
    top: 0;
    left: 0;
    z-index: 90;
    background-color: #12B7F5;
    height: 140px;
    /*-webkit-transform-origin: top;*/
  }

  .user-logo-wrapper {
    top: 0;
    left: 0;
    font-size: 0;
    z-index: 100;
    text-align: center;
  }

  .user-logo {
    display: inline-block;
    border: 2px solid #fff;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: #ededed;
    margin-top: 86px;
  }

  #userLogo {
    height: 100%;
    width: 100%;
    border-radius: 50%;
  }

  .infoList {
    margin-top: 15px;
  }

  .infoList li {
    font-size: .16rem;
    padding: .1rem .12rem;
    margin: 10px 0 24px;
    border-bottom: 1px solid #DCDCDC;
  }

  .homepage .userInfo {
    text-align: center;
  }

  .homepage .userName {
    font-size: 23px;
    line-height: 23px;
  }

</style>
